import React, { Component, useState, useEffect, useRef } from 'react'
import {
    Tabs, Button, message, Select, Space,
    DatePicker,
    Input,
} from 'antd';
const { Option } = Select;
import './VotingManagement.css';
import Axios from 'axios';

export default function informRegulate() {
    const sendtx = () => {
        message.success('gogogo')
    }

    // 表数据
    const [dates, setDates] = useState([{}])
    // 总数据条数
    const [pageCount, setPageCount] = useState(1);
    // 每页多少条数据 //下面分页选择调用
    const [pages, setPages] = useState(10);
    // 应该分多少页
    const [pageAll, setPageAll] = useState(Math.ceil(Number(pageCount) / pages));
    // 当前页
    const [pageNow, setPageNow] = useState(1);

    // ref
    const conPage = useRef(null)
    const getPages = useRef(null)

    const [classes, setClasses] = useState('');
    const [classNames, setClassNames] = useState('');

    useEffect(() => {
        console.log(classes)
    }, [classes])
    useEffect(() => {

    }, [classNames])
    // 前后端交互
    const ajax = (url, method, callback, dataes) => {
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(dataes)
        }).then(response => {
            return response.json()
        }).then(callback)
    }
    useEffect(() => {
        ajax('http://172.16.110.243:9999/Health/getAll', 'get', (res) => {
            console.log(res)
            if (res.code == 200) {
                setPageCount(res.data.length)
                let date = []
                for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                    date.push(res.data[i])
                    if (i >= res.data.length - 1) {
                        break;
                    }
                }
                setDates(date)
            } else {
                message.error(res.message)
            }
        });
    }, []);

    // 上一页
    const prePage = () => {
        if (pageNow == 1) {
            message.warning('没有上一页了');
        } else {
            setPageNow(Number(pageNow) - 1);
        }
    }
    // 下一页
    const nextPage = () => {
        if (pageNow == pageAll) {
            message.warning('没有下一页了')
        } else {
            setPageNow(Number(pageNow) + 1);
        }
    }
    // 确定跳转
    const confirmPage = () => {
        let getConPage = conPage.current.innerHTML;
        if (!isInteger(getConPage)) {
            message.warning('请输入数字或整数')
        } else if (getConPage > pageAll) {
            message.warning('页数太大了，没得')
        } else if (getConPage < 1) {
            message.warning('页数太小了，没得')
        } else {
            setPageNow(Number(getConPage))
            console.log(getConPage)
        }

    }
    // 选择页数
    const forPages = () => {
        setPages(Number(getPages.current.value))
        console.log(getPages.current.value)
    }

    // 同步刷新（监听数据变化）
    // 数据总量
    useEffect(() => {
        // 
        setPageAll(Math.ceil(Number(pageCount) / pages))
    }, [pageCount])
    // 监听每页多少条数据
    useEffect(() => {

        if (Math.ceil(Number(pageCount) / pages) == pageAll) {
            if (classes.length == 0 && classNames.length == 0) {
                ajax('http://172.16.110.243:9999/Health/getAll', 'get', (res) => {
                    if (res.code == 200) {
                        if (res.data.length == 0) {
                            message.error('没有查询到数据')
                        } else {
                            setPageCount(res.data.length)
                            let date = []
                            for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                                date.push(res.data[i])
                                if (i >= res.data.length - 1) {
                                    break;
                                }
                            }
                            setDates(date)
                        }
                    } else {
                        message.error(res.message)
                    }
                });
            } else {
                ajax('http://172.16.110.243:9999/Health/getBySearch', 'post', (res) => {
                    if (res.code == 200) {
                        console.log(res)

                        if (res.data.length == 0) {
                            message.error('没有查询到数据')
                        } else {
                            setPageCount(res.data.length)
                            let date = []
                            for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                                date.push(res.data[i])
                                if (i >= res.data.length - 1) {
                                    break;
                                }
                            }
                            setDates(date)
                        }
                    } else {
                        message.error(res.message)
                    }
                }, { 'name': classes, 'className': classNames });
            }
        } else {
            setPageAll(Math.ceil(Number(pageCount) / pages))
        }
    }, [pages])
    useEffect(() => {
        if (pageNow > pageAll) {
            setPageNow(pageAll)
        } else if (classes.length == 0 && classNames.length == 0) {
            ajax('http://172.16.110.243:9999/Health/getAll', 'get', (res) => {
                if (res.code == 200) {
                    if (res.data.length == 0) {
                        message.error('没有查询到数据')
                    } else {
                        setPageCount(res.data.length)
                        let date = []
                        for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                            date.push(res.data[i])
                            if (i >= res.data.length - 1) {
                                break;
                            }
                        }
                        setDates(date)
                    }
                } else {
                    message.error(res.message)
                }
            });
        } else {
            ajax('http://172.16.110.243:9999/Health/getBySearch', 'post', (res) => {
                if (res.code == 200) {
                    console.log(res)

                    if (res.data.length == 0) {
                        message.error('没有查询到数据')
                    } else {
                        setPageCount(res.data.length)
                        let date = []
                        for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                            date.push(res.data[i])
                            if (i >= res.data.length - 1) {
                                break;
                            }
                        }
                        setDates(date)
                    }
                } else {
                    message.error(res.message)
                }
            }, { 'name': classes, 'className': classNames });
        }
    }, [pageAll])
    useEffect(() => {
        if (classes.length == 0 && classNames.length == 0) {
            ajax('http://172.16.110.243:9999/Health/getAll', 'get', (res) => {
                if (res.code == 200) {
                    if (res.data.length == 0) {
                        message.error('没有查询到数据')
                    } else {
                        setPageCount(res.data.length)
                        let date = []
                        for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                            date.push(res.data[i])
                            if (i >= res.data.length - 1) {
                                break;
                            }
                        }
                        setDates(date)
                    }
                } else {
                    message.error(res.message)
                }
            });
        } else {
            ajax('http://172.16.110.243:9999/Health/getBySearch', 'post', (res) => {
                if (res.code == 200) {
                    console.log(res)

                    if (res.data.length == 0) {
                        message.error('没有查询到数据')
                    } else {
                        setPageCount(res.data.length)
                        let date = []
                        for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                            date.push(res.data[i])
                            if (i >= res.data.length - 1) {
                                break;
                            }
                        }
                        setDates(date)
                    }
                } else {
                    message.error(res.message)
                }
            }, { 'name': classes, 'className': classNames });
        }
    }, [pageNow])

    // 判断是否为整数
    const isInteger = (num) => {
        if (!isNaN(Number(num)) && num % 1 === 0) {
            return true;
        } else {
            return false;
        }
    }

    const change = (e) => {
        if (e.target.dataset.set == 'setClasses') {
            setClasses(e.target.value)

        } else {
            setClassNames(e.target.value)

        }
    }

    // 查询
    const find = () => {
        console.log('name', classes, 'className', classNames)
        if (classes.length == 0 && classNames.length == 0) {
            ajax('http://172.16.110.243:9999/Health/getAll', 'get', (res) => {
                if (res.code == 200) {
                    if (res.data.length == 0) {
                        message.error('没有查询到数据')
                    } else {
                        if (pageNow > Math.ceil(Number(pageCount) / pages)) {
                            setPageNow(Math.ceil(Number(pageCount) / pages))
                        } else {
                            setPageCount(res.data.length)
                            let date = []
                            for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                                date.push(res.data[i])
                                if (i >= res.data.length - 1) {
                                    break;
                                }
                            }
                            setDates(date)
                        }
                    }
                } else {
                    message.error(res.message)
                }
            });
        } else {
            console.log('ss')
            ajax('http://172.16.110.243:9999/Health/getBySearch', 'post', (res) => {
                if (res.code == 200) {
                    console.log(res)
                    if (res.data.length == 0) {
                        message.error('没有查询到数据')
                    } else {
                        setPageCount(res.data.length)
                        console.log(Math.ceil(Number(res.data.length) / pages))
                        if (pageNow > Math.ceil(Number(res.data.length) / pages)) {
                            setPageNow(Math.ceil(Number(res.data.length) / pages))
                        } else {
                            let date = []
                            for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                                date.push(res.data[i])
                                if (i >= res.data.length - 1) {
                                    break;
                                }
                            }
                            setDates(date)
                        }
                    }
                } else {
                    message.error(res.message)
                }
            }, { 'name': classes, 'className': classNames });
        }
    }
    const tablesTH = () => {
        // 删除
        const deletes = async (id) => {
            // message.success('去删除啦')
            ajax('http://172.16.110.243:9999/Health/deleteHealthById', 'post', (res) => {
                if (res.code == 200) {
                    message.success('成功删除', res.data, '条数据');
                    ajax('http://172.16.110.243:9999/Health/getAll', 'get', (res) => {
                        console.log(res)
                        if (res.code == 200) {
                            if (Math.ceil(Number(res.data.length) / pages) == pageAll) {
                                setPageCount(res.data.length)
                                let date = []
                                for (var i = (pageNow - 1) * pages; i < pageNow * pages; i++) {
                                    date.push(res.data[i])
                                    if (i >= res.data.length - 1) {
                                        break;
                                    }
                                }
                                setDates(date)
                            } else {
                                setPageCount(res.data.length)
                            }
                        } else {
                            message.error(res.message)
                        }
                    });
                } else {
                    message.error(res.message)
                }
            }, { 'id': id });
        }
        return (
            // 表格
            dates.map((val, id) => {
                return (
                    <tr key={id} style={{ fontSize: '6xp' }}>
                        <td style={{ width: '5%', overflow: 'hidden', padding: '4px', fontSize: '6xp' }}>{val.id}</td>
                        <td style={{ width: '7%', overflow: 'hidden', padding: '4px' }}>{val.name}</td>
                        <td style={{ width: '12%', padding: '4px' }}>{val.className}</td>
                        <td style={{ padding: '4px' }}><a href='#' className='underline'>{val.remind}</a></td>
                        <td style={{ width: '10%', overflow: 'hidden', padding: '4px' }}>{new Date(val.date1).toLocaleDateString()}</td>
                        <td style={{ width: '10%', overflow: 'hidden', padding: '4px' }}>{val.sender}</td>
                        <td style={{ width: '15%', overflow: 'hidden', padding: '4px' }}>{new Date(val.createTime).toLocaleString()}</td>
                        <td style={{ width: '7%', overflow: 'hidden', padding: '4px' }}>{val.receiver}</td>
                        <td style={{ width: '10%', overflow: 'hidden', padding: '4px' }}><a href='#' onClick={() => deletes(val.id)}>删除</a></td>
                    </tr>
                )
            })
        )
    }

    const tables = () => {

        if (dates.length == 0) {
            return (
                <>
                    <p>没数据</p>
                </>
            )
        } else {
            return (
                <>
                    <div className="card-containerJK">
                        <Tabs type="card" items={items()} />
                    </div>
                </>
            )
        }

    };

    return (
        <div>
            <div className='VotingManagementJK'>
                <div className='top'>
                    <div style={{ fontSize: '10px', transform: 'scale(0.9)' }}>
                        学生姓名:
                        <Input placeholder='请输入学生姓名' data-set={'setClasses'} onChange={change} style={{ width: '190px', height: '28px', marginLeft: '20px', marginRight: '20px', transform: 'scale(0.95' }} />
                        年级班级:
                        <Input placeholder='请输入年级班级' data-set={'setClassNames'} onChange={change} style={{ width: '190px', height: '28px', marginLeft: '20px', marginRight: '20px', transform: 'scale(0.95' }} />
                        <Space >
                            <Button type='primary' style={{ marginLeft: '20px', transform: 'scale(0.8)' }} onClick={find}>查询</Button>
                        </Space>
                    </div>
                </div>
                <div className='botton'>
                    <div style={{ transform: 'scale(0.9)' }}>
                        <p className='sendtx mb-3' onClick={sendtx}>发送提醒</p>

                        <table className="table table-striped table-bordered" style={{ color: '#666666', fontFamily: "'PingFangSC-Regular', 'PingFang SC', sans-serif" }}>
                            <thead>
                                <tr>
                                    <th style={{ padding: '5px' }}>序号</th>
                                    <th style={{ padding: '5px' }}>学生姓名</th>
                                    <th style={{ padding: '5px' }}>年级班级</th>
                                    <th style={{ padding: '5px' }}>带药提醒</th>
                                    <th style={{ padding: '5px' }}>用药日期</th>
                                    <th style={{ padding: '5px' }}>发送者</th>
                                    <th style={{ padding: '5px' }}>发送时间</th>
                                    <th style={{ padding: '5px' }}>接收人</th>
                                    <th style={{ padding: '5px' }}>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tablesTH()}
                            </tbody>
                        </table>
                        <div style={{ fontSize: '10px', marginTop: '20px', display: 'flex', textAlign: 'center' }} className='kuang1'>
                            <p style={{ height: '24px', border: '1px solid #C9C9C9', borderRadius: '2px', fontSize: '10px', padding: '2px' }} onClick={prePage}>上一页</p>
                            <p style={{ backgroundColor: '#1EC695', color: 'white', width: '32px', height: '24px', border: '1px solid #C9C9C9', borderRadius: '2px', fontSize: '10px', padding: '2px' }}>{pageNow}</p>
                            <p style={{ height: '24px', border: '1px solid #C9C9C9', borderRadius: '2px', fontSize: '10px', padding: '2px' }} onClick={nextPage}>下一页</p>&nbsp;
                            <p style={{ lineHeight: '24px' }}>&nbsp;共&nbsp;{pageCount}&nbsp;&nbsp;条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跳至</p>
                            <p ref={conPage} style={{ width: '28px', height: '24px', border: '1px solid #C9C9C9', borderRadius: '2px', fontSize: '10px', padding: '2px' }} contentEditable='true' suppressContentEditableWarning='true' >{pageNow}</p>
                            <p style={{ lineHeight: '24px' }}>&nbsp;页&nbsp;</p>
                            <p style={{ width: '34px', height: '24px', border: '1px solid #C9C9C9', borderRadius: '2px', fontSize: '10px', padding: '1px' }} onClick={confirmPage}>确定</p>&nbsp;&nbsp;&nbsp;&nbsp;
                            <select ref={getPages} onChange={forPages} style={{ width: '68px', height: '24px', border: '1px solid #C9C9C9', borderRadius: '2px', fontSize: '10px', padding: '2px' }}>
                                <option value='10'>10条/页</option>
                                <option value='15'>15条/页</option>
                                <option value='20'>20条/页</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    )
}


